Spread.Viewsでは、ツリー列プレゼンターを使用して、階層データをグリッドに表示できます。ツリー列プレゼンターを使用する場合、ページをロードすると親グリッドが表示されます。しかし子グリッドは、［＋］記号をクリック、または右矢印キーを押さないと表示されません。
このように、データアイテムをツリー状に表示するには、グリッドに以下の記述子を使用します。
- parentField: 各データレコードの親を格納します。
- keyField: 一意のプロパティ。親アイテムを検索するために使用されます。
- column ツリーを適用する列を指定します。
ツリー列はグループと組み合わせて使用できます。グループと組み合わせるかどうかにかかわらず、ツリーグリッドのポリシーは以下のようになります。parentFieldの値がnull、未定義、または空白文字列（''）であるアイテムは、ルートノードとみなされます。parentFieldが指定されているアイテムの場合は、keyFieldの値が指定の親値と一致するアイテムが存在しないと、ルートが存在しないとみなされ、コントロール上に表示されません。つまり、グループを使用する場合、グループおよび階層設定に基づき、下位レベルのいくつかのグループでは、子アイテムの存在が示されているにもかかわらず、実際に表示されるアイテムがない（このグループにはルートノードが存在しないため）、不自然な表示状態となる可能性があります。
ツリー列プレゼンターを作成するには、次の手順を実行します。注意: この手順では、ツリー列とグループとを組み合わせた方法を示していますが、グループ化を使用せず、ツリー列を単独で使用することもできます。
サンプルコード
列の定義を追加します。ツリー列を適用する列には、hierarchyFooterプロパティも設定します。
//Column Definition var columns = [{ id: 'department', caption: 'Department', dataField: 'department', width: 250, hierarchyFooter: '<span style="font-weight:bold">Count: {{=it.eval("=COUNT([id])")}}</span>' }, { id: 'budget', caption: 'Budget', dataField: 'budget', format: '$0.00', minWidth: 120, hierarchyFooter: '<span style="font-weight:bold">Total: {{=it.eval("=SUM([budget])", "$0,0")}}</span>' }, { id: 'location', caption: 'Location', dataField: 'location', minWidth: 120 }, { id: 'phone', caption: 'Phone', dataField: 'phone', minWidth: 120 }, { id: 'country', caption: 'Country', dataField: 'country', minWidth: 120 }, { id: 'id', caption: 'Id', dataField: 'id', visible: false }, { id: 'parent', caption: 'Parent', dataField: 'parent', visible: false }];グリッドの初期化時に、groupingおよびhierarchyプロパティを設定します。各ノードを手動で展開する関数を追加します。
注意: グループ化機能を使用せずにツリー列を実装することもできます。
var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({
allowSorting: true,
showRowHeader: false,
grouping: [{
field: 'country',
footer: {
visible: false
}
}],
hierarchy: {
keyField: 'id',
parentField: 'parent',
collapsed: true,
column: 'department',
footer: {
visible: true
}
}
}));